<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-bar title="弹出位置" desc="position">
                <template slot="right">
                    <uxt-radio-group v-model="position" size="sm" type="btn">
                        <uxt-radio
                            classes="margin-right-sm"
                            label="bottom"
                            value="bottom"
                        ></uxt-radio>
                        <uxt-radio label="center" value="center"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-bar title="可清空" desc="clearable">
                <template slot="right">
                    <uxt-switch v-model="clearable" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="禁用" desc="disabled">
                <template slot="right">
                    <uxt-switch v-model="disabled" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="bg-white padding">
                <uxt-single-selector
                    v-model="value"
                    :options="options"
                    :position="position"
                    :clearable="clearable"
                    :disabled="disabled"
                    @change="handleEvent('change', $event)"
                    @opened="handleEvent('opened', $event)"
                    @closed="handleEvent('closed', $event)"
                    @sure="handleEvent('sure', $event)"
                    @cancel="handleEvent('cancel', $event)"
                    @clear="handleEvent('clear', $event)"
                >
                    <view class="bg-theme round padding text-center">
                        {{ value === -1 ? '请选择' : `选择了第${value + 1}项` }}
                    </view>
                </uxt-single-selector>
            </view>
        </uxt-bar-group>
        <uxt-bar-group title="单选栏">
            <uxt-bar title="盒模式" desc="box">
                <template slot="right">
                    <block v-if="box">
                        圆角：
                        <uxt-radio-group v-model="radius" size="sm" type="btn">
                            <uxt-radio label="无" value=""></uxt-radio>
                            <uxt-radio
                                classes="margin-lr-sm"
                                label="小圆角"
                                value="radius"
                            ></uxt-radio>
                            <uxt-radio
                                classes="margin-right-sm"
                                label="大圆角"
                                value="round"
                            ></uxt-radio>
                        </uxt-radio-group>
                    </block>
                    盒模式：
                    <uxt-switch v-model="box" round size="sm" @change="radius = ''"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-single-selector-bar
                title="单选栏"
                :options="options"
                :position="position"
                :clearable="clearable"
                :disabled="disabled"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
                @change="handleEvent('change', $event)"
                @opened="handleEvent('opened', $event)"
                @closed="handleEvent('closed', $event)"
                @sure="handleEvent('sure', $event)"
                @cancel="handleEvent('cancel', $event)"
                @clear="handleEvent('clear', $event)"
            ></uxt-single-selector-bar>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtSingleSelector from '@xtcoder/uxt/components/uxt-single-selector.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtRadio,
        uxtRadioGroup,
        uxtSwitch,
        uxtSingleSelector,
        uxtSingleSelectorBar
    },
    data() {
        return {
            title: '单选器',
            position: 'bottom',
            clearable: true,
            disabled: false,
            options: ['选项1', '选项2', '选项3', '选项4'],
            value: -1,
            box: false,
            radius: '',
            events: ''
        }
    },
    methods: {
        handleEvent(type, e) {
            this.events += `@${type}${e !== undefined ? `(${JSON.stringify(e)})` : ''}<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
